<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影院信息</title>
    <!-- <link rel="stylesheet" href="static/lib/bootstrap-4.6.2/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
    <script src="../static/lib/jquery-3.5.1.min.js"></script>
    <script src="../static/lib/layui/layui.js"></script>
    <!-- <script src="static/lib/bootstrap-4.6.2/bootstrap.min.js"></script> -->
</head>

<body>
<!-- 导航栏 -->
<ul th:replace="_fregments :: nav(0)" class="layui-nav m-pl-sm m-pr-sm" lay-filter="">
    <img src="../static/favicon.ico" width="20px">
    <a href="#" class="logo">
        &nbsp;挚夕影院
    </a>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-home">&nbsp;</i>首页</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-windows">&nbsp;</i>电影</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-link">&nbsp;</i>影院</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-tabs">&nbsp;</i>榜单</a></li>
    <span style="display: inline-block; width: 60%;">
            <div style="display: flex; padding-left: 20px;">
                <input type="text" name="title" required lay-verify="required" placeholder="找电影、影院"
                       autocomplete="off"
                       class="layui-input" style="width: 300px;">
                <button class="layui-btn" lay-submit lay-filter="formDemo"><i
                        class="layui-icon layui-icon-search">&nbsp;</i></button>
            </div>
        </span>

    <li class="layui-nav-item" style="text-align: right!important;">
        <a href=""><img src="../static/images/me.jpg" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>

</ul>

<!-- 内容 -->
<div class="layui-container" style="width: 100%; margin: 0%; padding: 0%;">

    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <!-- 背景开始-->
            <div class="bg">
                <div class="layui-row" style="margin-left: 10%; margin-right: 10%;  padding-top: 50px;">
                    <!-- 图片 -->
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                        <img th:src="@{${cinema.picture}}" width="100%">
                        <input type="hidden" th:value="${cinema.id}" id="inputCinemaId">
                        <a id="aUrl" th:href="@{/chooseSeat}"></a>
                    </div>
                    <!-- 描述开始 -->
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md8">
                        <div th:text="${cinema.name}" class="m-title m-mb m-ml">
                            万达影城（芜湖万达广场IMAX店）
                        </div>
                        <div th:text="${cinema.address}" class="m-tc-white m-ml m-mt-sm ">
                            镜湖区赭山东路1号万达广场F4层
                        </div>
                        <div class="m-tc-white m-ml m-mt-sm ">
                            电话：0553-5676666
                        </div>
                        <div class="m-tc-white m-ml m-mt-sm ">
                            影院服务
                            <hr>
                        </div>
                        <div th:if="${cinema.isTicketChanged}" class="m-ml m-tc-white">
                            <div>
                                <span class="layui-badge-rim">改签</span>
                                <span>未取票用户放映前60分钟可改签</span>
                            </div>
                        </div>
                        <div th:if="${cinema.isRefunded}" class="m-ml m-tc-white">
                            <div>
                                <span class="layui-badge-rim">退票</span>
                                <span>未取票用户放映前24小时可退票</span>
                            </div>
                        </div>
                    </div><!-- 描述结束 -->

                </div>
            </div><!-- 背景结束-->
        </div>
    </div>
    <!-- 下面正文 -->
    <div style="margin-left: 10%; margin-right: 10%;  padding-top: 50px;">
        <!-- 导航 -->
        <span class="layui-breadcrumb" lay-separator=">">
                <a th:href="@{/}">挚夕导航</a>
                <a th:href="@{/cinema}">影院</a>
                <a th:text="${cinema.name}">万达影城（芜湖万达广场IMAX店）</a>
            </span>
        <div class="layui-row m-mt">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                <!-- 选择电影 -->
                <div class="layui-carousel" id="carousel1">
                    <div carousel-item>
                        <!-- 一个条目开始 -->
                        <div>
                            <div style="display: flex; align-items: center; padding-left: 50px;">
                                <!-- 一个图片 -->
                                <div th:each="movie : ${movies}"
                                     class="layui-col-xs12 layui-col-sm3 layui-col-md2 m-pr m-mt m-child-align-center">
                                    <img class="m-movie" th:data-value="${movie.id}" th:src="@{${movie.poster}}"
                                         width="80%" th:classappend="${movie.id == movieId} ? 'm-ma'">
                                </div>
                            </div>
                        </div><!-- 一个条目结束 -->
                    </div>

                </div>
                <div id="table-container">
                    <div th:fragment="sessionList">
                        <!-- 电影信息 -->
                        <div class="m-mt">
                            <span class="m-ts-large" th:text="${movie.name}">送你一朵小红花</span>
                            <span class="m-tc-yellow m-ml m-ts-normal" th:text="${movie.movieRate.score}">9.9分</span>
                            <div class="m-mt">
                                <span class="m-tc-gray">时长 :</span> <span th:text="${movie.length}">128分钟</span>
                                <span class="m-tc-gray m-ml">类型 :</span>
                                <span>
                                <span th:each="type : ${movie.types}" th:text="${type.name} + ' / '"></span>
                            </span>
                                <span class="m-tc-gray m-ml">主演 :</span>
                                <span>
                            <span th:each="ac : ${movie.actors}" th:text="${ac.name} + ' / '"></span>

                        </span>
                            </div>
                        </div>
                        <hr>
                        <!-- 观影时间 -->
                        <div class="m-mt m-mb">
                            <span class="m-tc-gray">观影时间 :</span>
                            <span class="m-time" th:classappend="${date.equals(selectedDate)} ? 'm-time-active'"
                                  th:each="date : ${dates}"
                                  th:text="${#dates.format(date, 'yyyy-MM-dd')}">2023年11月19日</span>
                        </div>
                        <!-- 放映厅列表 -->
                        <table class="layui-table" lay-even lay-skin="nob">
                            <thead>
                            <tr>
                                <th>放映时间</th>
                                <th>语言版本</th>
                                <th>放映厅</th>
                                <th>售价</th>
                                <th>选座购票</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="se : ${sessions}">
                                <td>
                                    <h3 th:text="${se.movieRuntime.begin}">12:30</h3>
                                    <span class="m-tc-gray">
                                        <span th:text="${se.movieRuntime.end}">14:35</span>
                                        散场
                                    </span>
                                </td>
                                <td th:text="${se.language}">国语</td>
                                <td th:text="${se.hall.name}">一号激光厅</td>
                                <td class="m-tc-red">
                                    ￥<span th:text="${se.price}">80</span>
                                </td>
                                <td>
                                    <button th:data-id="${se.id}" class="layui-btn layui-btn-normal buyBtn">选座购票</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                    </div>
                </div>

            </div>
        </div>
    </div>


</div>
<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../static/lib/jquery-3.5.1.min.js"></script>
<script src="../static/lib/layui/layui.js"></script>
<!--/*/</th:block>/*/-->
<script>
    function loadData() {
        var cinemaId = $("#inputCinemaId").val()
        var movieId = $(".m-movie.m-ma").data('value')
        var date = $(".m-time.m-time-active").text()
        console.log(cinemaId + "," + movieId + "," + date)
        //加载数据
        $("#table-container").load(/*[[@{/cinemaInfo}]]*/"/cinemaInfo", {
            cinemaId: cinemaId,
            movieId: movieId,
            date: date
        });
    }

    $(function () {
        layui.use(function () {
            var layer = layui.layer
                , form = layui.form,
                element = layui.element,
                carousel = layui.carousel;


            //建造实例
            carousel.render({
                elem: '#carousel1'
                , width: '100%' //设置容器宽度
                , height: '300px'
                , arrow: 'always' //始终显示箭头
                , autoplay: false
                , indicator: 'none'
                //,anim: 'updown' //切换动画方式
            });
            // layer.msg('Hello World');
            var rate = layui.rate;
            var ins1 = rate.render({
                elem: '#score',  //绑定元素
                length: 10,
                value: 9.3,
                half: true,
                readonly: true
            });
        });

        //点击电影图片
        $(".m-movie").click(function () {
            $(".m-movie").removeClass('m-ma')
            $(this).addClass('m-ma')
            loadData()
        })
        //点击日期
        $("#table-container").on('click', '.m-time', function () {
            $(".m-time").removeClass('m-time-active')
            $(this).addClass('m-time-active')
            loadData()
        })
        //选座购票
        $("#table-container").on('click', '.buyBtn', function () {
            //影院id
            var cinemaId = $("#inputCinemaId").val()
            var movieId = $(".m-movie.m-ma").data('value')
            var sessionId = $(this).data('id')
            // console.log(cinemaId + "," + movieId + ',' + sessionId)
            window.location.href = $("#aUrl").attr('href') + "?cinemaId=" + cinemaId + "&movieId=" + movieId + "&sessionId=" + sessionId
            // $.ajax({
            //     url: '[[@{/chooseSeat}]]',
            //     type: 'get',
            //     data: {
            //         cinemaId: cinemaId,
            //         movieId: movieId,
            //         sessionId: sessionId
            //     },
            //     success: function (response) {
            //         //新打开一个页面（about:blank是打开浏览器空白页的命令）, _blank：打开一个新的窗口
            //         var newPage = window.open("选座", "_blank");
            //         //将后台传过来的html页面写到新打开的浏览器窗口中显示
            //         newPage.document.write(response)
            //     },
            //     error: function (response) {
            //         toastr.error(response.responseText, 'error')
            //     }
            // })
        })
    })

</script>
</body>

</html>